<template>
		<!-- 头部导航栏 -->
		<view style="
			border-bottom: solid 1rpx #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx 20rpx;
			position:fixed;
			top:0;left:0;right:0;
			height: 60px;
			z-index: 22;
			background-color: white;
		">	
			<view style="position: absolute;z-index: 22;display: flex;" @click="back">
			<u-icon name="arrow-left"></u-icon>
			<view>返回</view>
		</view>
		
		<view style="flex-direction: column;position: absolute;left: 0;right: 0;height: 100%;display: flex;align-items: center;justify-content: center;">
			<view style="font-weight: bold;padding: 5px;">
				选择要发布的活动
			</view>
			<view>
				{{`(${$officePost.create.selected.length}/${10})`}}
			</view>
		</view>
		
		<view @click="nextStep" style="position: fixed;right: 0;;display: flex;align-items: center;;padding: 10rpx 25rpx;margin: 0 25rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
			<view style="margin-left: 10rpx;">
				下一步
			</view>
		</view>
	</view>
	
	<view style="padding-top: 60px;"></view>
	
	<view>
		<view v-for="task in tasks" style="display: flex;flex-direction: column;">
			<view @click="select(task)" style="border-radius: 15rpx;box-shadow: 0 0 14px 0 #88888855;margin: 20rpx;border: solid 1rpx #00bc06;" 
			:style="{
				border: isSelected(task) ? 'solid 1rpx #00bc06' : 'none'
			}">
				<view style="display: flex;justify-content: space-between;padding: 30rpx 20rpx 0 20rpx;">
					<view style="font-weight: bold;font-size: 16px;align-items: center;">
						{{task.title}}
					</view>
					<view style="color: #888;font-size: 13px;border-radius: 10rpx;color: white;"
						:style="{
							padding:isSelected(task) ? '20rpx' : '20rpx 40rpx',
							backgroundColor: isSelected(task) ? '#00bc06' : 'white',
							border: isSelected(task) ?  'none' : 'solid 1rpx #eee'
						}"
					>
						<text style="font-size: 12px;" 
							:style="{
								color: isSelected(task) ? 'white' : '#000'
							}"
						>
							{{isSelected(task) ? '取消选择' : '选择'}}
						</text>
					</view>
				</view>
				
				<view style="display: flex;justify-content: space-between;padding: 30rpx 20rpx 0 20rpx;">
					<view style="font-size: 13px;align-items: center;">
						{{task.start_date}} 周{{$dayjs_util.week(task.start_date)}}
					</view>
					<view style="color: #888;font-size: 13px">
						<text style="font-size: 20px;color: orangered;padding: 0 10rpx;">{{task.jobs[0].price}}</text> 
						<text style="font-size: 12px;">{{`${task.jobs[0].price_type}/${task.jobs[0].settle_type}`}}</text>
					</view>
				</view>
				
				<view style="display: flex;justify-content: space-between;padding: 20rpx 20rpx 0 20rpx;">
					<view style="color: #888;font-size: 13px;display: flex;align-items: center;">
						<i class="iconfont icon-fujinjianzhi1" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;"></i>
						{{`${task.city}.${task.district}`}} {{task.address}}
					</view>
				</view>
				
				<view style="display: flex;justify-content: flex-start;flex-wrap:wrap;padding: 020rpx;">
					<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						提前30分钟到场
					</view>
					<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						提供晚餐
					</view>
					<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						要求女生
					</view>
					<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						加班补贴
					</view>
					<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						节日礼品
					</view>
					<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						隔天住宿
					</view>
					<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						身高170cm以上
					</view>
				</view>
				
				<view style="display: flex;padding: 0 20rpx 20rpx ">
					<view style=";width: 100%;color: #888;font-size: 13px;background-color: #eee;margin:10rpx 0rpx 0 0;padding: 4px 5px;border-radius: 5px;">
						有意向的同学,立即添加微信,长期做的有更多福利<br/>微信号: xiaoyan265478 飞机勿扰,谢谢!
					</view>
				</view>
				
				<view style="padding-bottom: 10rpx;">
					<view v-for="(job,index) in task.jobs" style="padding:20rpx;border-top: solid 1rpx #eee;display: flex;justify-content: space-between;">
						<view style="font-weight: bold;">
							{{job.name}}
						</view>
						<view>
							{{job.start_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad() {
			await this.updateList()
		},
		computed:{
			isSelected(){
				return (task)=>{
					return this.$officePost.create.selected.some((item)=>item.id == task.id)
				}
			},
		},
		data() {
			return {
				selected:[],
				tasks:[]
			}
		},
		methods: {
			async updateList(){
				const res = await this.$http.get('/manager/job/task/list/all')
				console.log(res)
				this.tasks = res.data.data
				this.$officePost.create.selected = []
			},
			back(){
				uni.navigateBack()
			},
			select(task) {
				if(this.isSelected(task))
				{
					const index = this.$officePost.create.selected.findIndex((item,index)=>item.id==task.id)
					this.$officePost.create.selected.splice(index,1)
					return
				}else{
					this.$officePost.create.selected.push(task)
				}
			},
			async nextStep(){
				
				if(this.$officePost.create.selected.length == 0)
				{
					uni.showToast({
						title:'请选择要发布的活动',
						icon:'none'
					})
					
					return
				}
				
				uni.navigateTo({
					url: 'publish-preview'
				})
				
				//const result = await this.$officePost.createOK()
			
				//console.log(result)
				
				//console.log('创建成功')
			}
		}
	}
</script>

<style>

</style>
